<template>
  <div>
    <myhead title="电影"></myhead>
    <div class="swipe-box">
        <div class="city" v-if="city" @click="choosecity()">
           <span>{{city.name}} </span>
           <van-icon name="arrow-down" />
        </div>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
              <van-swipe-item v-for="(l,i) in banner" :key="i">
                  <van-image class="simg" :src="l.imgUrl"></van-image>
              </van-swipe-item>
        </van-swipe>
    </div>
    <div class="mbox">
        <van-tabs class="nav" v-model="type"
          animated
          ellipsis
          sticky
          swipeable

          color="#ff5f16"
          title-active-color="#ff5f16"
        >
          <van-tab title="正在热映" :name="1">
              <loadmore :refresh="refresh"  :loaddata="addMoreData" >
                  <mlist :films="films" :type="1"></mlist>
              </loadmore>
          </van-tab>
          <van-tab title="即将上映" :name="2">
            <mlist :films="films" :type="2"></mlist>
          </van-tab>
        </van-tabs>
    </div>
  </div>
</template>


<script>
import {Dialog} from "vant"
export default {
  data(){
    return {
      banner:[],
      films:[],
      type:1,  // 1 正在热映  2 即将上映 
      tabs:[],
      pageNum:1,
      pageSize:10,
      total:0, 
    }
  },
  watch:{
    type(v){
      console.log(v)
      this.pageNum = 1;
      this.getfilms(v,this.pageNum);
    }
  },
  methods:{
    // 刷新数据
    refresh(){
      this.pageNum = 1;
      this.getfilms()
    },
    // 加载更多 
    addMoreData(callback,cb){
      this.pageNum++;
      if(this.pageNum> Math.ceil(this.total/this.pageSize) ){
        // 说明数据见底了
        cb()
      }else{
        this.$ajax.getMaiZuo({
            type: this.type,
            cityId: this.city.cityId,
            k: 3565030,
            pageNum: this.pageNum,
            pageSize: this.pageSize,
        },{
          'X-Host': 'mall.film-ticket.film.list'
        })
        .then(res=>{
            this.films  = this.films.concat(res.data.films) // 拼接 
            this.total =  res.data.total 
            callback();
        })
      }
    },
    async getfilms(type=this.type,pageNum){
      pageNum = pageNum || this.pageNum;
      let res  = await  this.$ajax.getMaiZuo({
          type: type,
          cityId: this.city.cityId,
          k: 3565030,
          pageNum: pageNum,
          pageSize: this.pageSize,
      },{
        'X-Host': 'mall.film-ticket.film.list'
      });

      this.films  = res.data.films
      this.total =  res.data.total 
    },
    choosecity(){
       this.$router.push({name:'city',query:{
         name:this.city.name
       }})
    }
  },
  created(){
    if(this.city){
      // 已经选择城市 
      // 请求接口 
      this.$ajax.getMaiZuo({
        type: 2,
        cityId: this.city.cityId,
        k: 3565030
      },{
        'X-Host': 'mall.cfg.common-banner',
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"1604538483996913449009153","bc":"110100"}'
      })
      .then(res=>{
        console.log(res)
       this.$nextTick(()=>{
         this.banner = res.data;
       })
      })

      this.$ajax.getMaiZuo({
        type: this.type,
        cityId: this.city.cityId,
        k: 3565030,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      },{
        'X-Host': 'mall.film-ticket.film.list'
      })
      .then(res=>{
        console.log(res)  
        this.films  = res.data.films
        this.total =  res.data.total 
      })
    }else{
      // 必须要去选择城市 
      this.$dialog.alert({
        title: '城市选择',
        message: '你尚未选择城市或者城市定位,请去选择',
      }).then(() => {
        // on close
        this.$router.push({name:"city"})
      });
    }
  },
  mounted(){
    // this.$ajax.first()
    // .then(res=>{
    //   console.log(res)
    // })
  }
}
</script>


<style lang="scss" scoped>
.mbox{
  padding-bottom:50px;
}
.swipe-box{
  width:100%;
  height:195px;
  position: relative;
  .city{
    position: absolute;
    top:20px;
    left:20px;
    padding:3px 6px;
    border:1px solid darkcyan;
    background: rgba(0,0,0,0.3);
    color:#fff;
    font-size: 12px;
    z-index:1001;
    border-radius: 10px;
    max-width: 200px;
    overflow: hidden;
  }
  .my-swipe{
    width:100%;
    height:195px;
    .simg{
      height:195px;
      width:100%;
    }
  }
}

.nav{
  z-index:3000;
}
</style>

